import { FC, useMemo } from "react";
import { inject, observer } from "mobx-react";
import { createList, ROWWORD } from "../../utils";
import { ITStore } from "../../store";
import { ITShelf, ITBottle } from "../../store/interfaces";
import "./index.less";

interface TProp {
  store: ITStore;
  shelfInfo: ITShelf;
  bottleInfo: ITBottle;
  slotName: string;
}

const WRAPWIDE = 160;
const WRAPHEIGHT = 120;

const ShelfMiniPlane: FC<TProp | any> = ({
  store,
  shelfInfo,
  bottleInfo,
  slotName,
}: TProp): JSX.Element => {
  const {
    designerStore: { currentReagentsInfo, currentReactorReagents },
  } = store;

  const { diameter = 0, shape } = bottleInfo || {};

  const { row, column, length } = shelfInfo || {};

  let planeRate = 1;
  if (length) {
    planeRate = WRAPWIDE / length;
  }

  const rowList = useMemo(() => {
    return createList(row);
  }, [row]);

  const colList = useMemo(() => {
    return createList(column);
  }, [column]);

  const bottlediameter = useMemo(() => {
    return Math.floor(planeRate * diameter) || 0;
  }, [diameter, planeRate]);

  const rowMarg = useMemo(() => {
    return Math.floor((WRAPHEIGHT - diameter * row) / (2 * row)) || 0;
  }, [diameter, row]);

  return (
    <div className="miniplane" style={{ width: WRAPWIDE }}>
      {rowList.map((item: number) => {
        const rowName = ROWWORD[item];
        return (
          <div
            key={item}
            className="row"
            style={{ marginTop: rowMarg, marginBottom: rowMarg }}
          >
            {colList.map((cItem: number) => {
              const bottleName = rowName + (cItem + 1);

              let hasReagent = false;
              if (currentReagentsInfo && slotName) {
                const shelfReagent = currentReagentsInfo[slotName];
                if (shelfReagent) {
                  const bottleReagent = shelfReagent[bottleName];
                  if (bottleReagent) {
                    hasReagent = true;
                  }
                }
              }

              if(slotName === "C3" && currentReactorReagents && currentReactorReagents.length){
                currentReactorReagents.some(item => {
                  if(item.tubeName === bottleName){
                    hasReagent = true;
                    return true;
                  }
                  return false;
                })
                // changeCurrentReagentorReagent
              }

              let colStyle = {
                width: bottlediameter,
                height: bottlediameter,
                borderRadius: shape === "circular" ? bottlediameter : 8,
              };

              return (
                <div
                  key={cItem}
                  className={`col ${hasReagent ? "hasreagent" : ""}`}
                  style={colStyle}
                ></div>
              );
            })}
          </div>
        );
      })}
    </div>
  );
};

export default inject("store")(observer(ShelfMiniPlane));
